$(function () {
    init();
    function init() {
        mui.init({
            pullRefresh: {
                container: "#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down: {
                    height: 50,//可选,默认50.触发下拉刷新拖动距离,
                    auto: true,//可选,默认false.首次加载自动下拉刷新一次
                    contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                    callback: function () {   //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

                        queryCart(function (result) {
                            console.log(result);
                            var html = template("cartTpl", { data: result });
                            /* 把数据添加到结构里面 */

                            $("#OA_task_2").html(html);
                            // 结束下拉刷新
                            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
                        });
                    }
                }
            }
        });

        /* 
            绑定复选框-计算总金额
            tap 还没有勾选上 就已经触发了
            change 值改变之后再触发
            计算总额分析:
            1 给所有的复选框绑定 change  要使用事件委托的方式绑定(因为复选框是动态生成)
            2 获取到所有的已经勾选上的复选框
            3 获取复选框所在的 商品的价格和数量
            4 做总价格的运算就可以了
        */
        $("#OA_task_2").on("change", ".check-inp", function () {
            // console.log(123);
            /* 这个方法好像有点复杂,放弃 */
            // console.log($(this).parents().siblings(".right-content")[0].children[0].innerHTML);
            /* 获取页面中已经勾选中的复选框 */
            var chkList = $("#OA_task_2 .check-inp:checked");
            /* 定义总金额 */
            var totalPrice = 0;
            /* 循环获取总金额 */
            for (var i = 0; i < chkList.length; i++) {
                /* 获取到json格式的所有数据 */
                var jsonObj = $(chkList[i]).parents(".mui-table-view-cell")[0].dataset.obj;
                /* 转换格式obj */
                var obj = JSON.parse(jsonObj);
                // console.log(obj);
                /* 获取当的价格 */
                var price = obj.price;
                /* 获取选择的数量 */
                var num = obj.num;
                /* 计算总金额 */
                totalPrice += num * price;
            }
            /* 把这个总金额添加到结构中 */
            $(".cre-total").html("订单总额：¥ " + totalPrice + "");
         });

        /* 删单个商品 */
        /**
         * 1 给所有的删除按钮绑定tap  事件委托的方式
         * 2 先弹出对话框
         * 3 先获取被删除的商品的id ->li data-obj 属性
         * 4 需要把id 转为数组 再发送请求 (要使用$.ltAjax发送)
         * 5 删除成功 刷新 手动触发下拉刷新 就可以了
         */
        $("#OA_task_2").on("tap", ".delete-btn", function () {
            /* 把当前的this存起来,that就是被点击的按钮 */
            var that = this;
            mui.confirm("确定要删除吗？", "警告", ["是", "否"], function (a) {
                if (a.index == 0) {
                    /* 点击的是确定，删除数据 */
                    var jsonObj = $(that).parents(".mui-table-view-cell")[0].dataset.obj;
                    var obj = JSON.parse(jsonObj);
                    var id = obj.id;
                    /* 发送删除请求 */
                    deleteCart(id);
                } else if (a.index == 1) {
                    /* 点击取消 */
                }
            })
        });

        /* 修改购物车 */
        /**
         * 1 绑定事件
         * 2 获取被点击的商品的 尺码 选择的数量 id
         * 3 动态渲染数据- 在mui-confirm里面渲染的
         * 4 把选择中的参数 发送到后台
         * 5 编辑成功->手动触发下拉刷新
         */
        $("#OA_task_2").on("tap", ".edit-btn", function () {
            // console.log(123);
            /* 把当前的this存起来,that就是被点击的按钮 */
            var that = this;
            var jsonObj = $(that).parents(".mui-table-view-cell")[0].dataset.obj;
            var obj = JSON.parse(jsonObj);
            /* 给obj添加一个属性 */
            obj.sizeArr = $.sizeFormat(obj.productSize);
            // console.log(obj);
            /* 生成数据 */
            var html = template("editTpl", obj);
            console.log(obj);
            /* 把数据添加到mui的弹窗里面 */
            /* 因为mui.confirm会把空格或者回车直接渲染成br标签，所以需要把空格或者回车处理掉 */
            html = html.replace(/\n/g, "");   //替换所有的回车
            mui.confirm(html, "编辑", ["是", "否"], function (a) {
                if (a.index == 0) {
                   /* 点击了确认，发送请求，修改数据 */
                    var updataObj = {
                        id: obj.id,
                        size: $(".pro-size span.active").html(),
                        num: $(".mui-numbox-input").val()
                    }
                    updateCart(updataObj);
                } else if (a.index == 1) {
                   /* 点击取消 */
               }
            });
            // 初始化数字输入框
            mui(".mui-numbox").numbox();
        });

        /* 点击尺码，要使用时间委托的方式 */
        /* 在这里弹窗的结构并不是在主体内容里面的，所有父元素直接写body */
        $("body").on("tap", ".pro-size span", function () {
            $(this).addClass("active").siblings().removeClass("active");
        })
    }

    /* 封装查询购物车 */
    function queryCart(callback) {
        $.ltAjax({
            url: "/cart/queryCart",
            success: function (result) {
                callback && callback(result);
            }
        });
    }

    /* 根据id去删除数据 */
    /**
     * 在这里传入的参数是对象的格式
     *
     */
    function deleteCart(id) {
        var arr = [id];
        var obj = { "id": arr }
        /* 调用自己封装好的ajax方法 */
        $.ltAjax({
            url: "/cart/deleteCart",
            data: obj,
            success: function (result) {
                // 手动启用刷新组件
                mui("#refreshContainer").pullRefresh().pulldownLoading();
            }
        });
    }

    /* 修改购物车 */
    function updateCart(data) {
        $.ltAjax({
            url: "/cart/updateCart",
            type: "post",
            data: data,
            success: function (result) {
                if (result.success) {
                    // 手动启用刷新组件
                    mui("#refreshContainer").pullRefresh().pulldownLoading();
                } else {
                    mui.toast(result);
                }
            }
        });
    }

    /* 
        让template插件认识我们自己定义的方法
        让template提供一个接口，让我们可以往里面注册方法
        template.helper("在插件中使用的方法名","我们在js里面定义的方法")

     */
    template.helper("objToJson", function (value) {
        return JSON.stringify(value);
    });

});